<template>
	<view>
		<uni-nav-bar dark :fixed="true" shadow bgimage="linear-gradient(to right, #4facfe 0%, #00f2fe 100%)" status-bar
			left-icon="left" left-text="返回" title="我的收藏" @clickLeft="back" />
		<view class="uni-nav-bar-empty-v"></view>
		
		<view class="searchv">
			<view style="width: 80%;height: 90rpx;">
				<uni-search-bar @confirm="search" v-model="searchValue" @blur="blur" @input="input"
					@cancel="cancel" @clear="clear" cancelButton="none" textColor="#494949">
				</uni-search-bar>
			</view>
			<view style="margin-top: 15rpx;">
				<text class="btn-grad" @click="search">搜索</text>
			</view>
		</view>
		<view class="ucenter-line"></view>
				
		<navigator v-for="(item, index) in focusList" :key="index" :index="index"		
			:url="'/pages/productDetail/productDetail?productId='+item.objectId">
			<view class="itemv" v-if="searchValue == '' || item.objectName.includes(searchValue)"
				style="padding: 20rpx;display: flex;justify-content:left;align-items:center;flex-wrap: wrap; border-bottom: 8rpx solid #F4F5F6;">
				<image :src="item.objectIcon" style="width: 140rpx;height: 140rpx;border-radius: 8rpx;"></image>
				<view style="display: inline-block;width: calc(100vw - 220rpx);margin-left: 30rpx;">
					<view class="grace-h5 grace-bold" style="color:#333333;height: 50rpx;">{{item.objectName}}</view>
					<text style="color: #e67e22;font-weight: 600;font-size: 28rpx;">&nbsp;¥{{item.price}}</text>
					<view style="margin-top: 10rpx; height: 50rpx;">
						<!-- <text class="label" v-for="(lable, index2) in item.labels">{{lable}}</text> -->
						<text style="color: #666666;font-size: 24rpx;">{{item.createTime}}</text>
					</view>
				</view>
			</view>			
		</navigator>
	</view>
</template>

<script>
	import focusApi from "@/api/focus.js"
	export default {
		data() {
			return {
				focusList: [],
				searchValue : ''
			}
		},
		onShow() {
			this.getFocusList();
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			getFocusList() {
				focusApi.list('PRODUCT').then(res => {
					this.focusList = res,
					console.log(res)
				})
			},
			search() {
				
			},
			clear() {
				
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: white;
	}
	
	.search-container {
		height: 100rpx;
		width: 100%;
		display: flex;
		justify-content:center;
		 align-items:center;
		flex-wrap: wrap;
		border-bottom: 2rpx solid #f8f9f9;
		
		.searchv {
			border: solid 1rpx #f8f9f9;
			background-color: #fbfbfb;
			width: 700rpx;
			height: 70rpx;
			border-radius: 35rpx;
			display: flex;
			justify-content:center;
			 align-items:center;
			flex-wrap: wrap;
		}


	}

	.itemv {
		
		
		.label {
			color: #e67e22;
			border: 1rpx solid #e67e22;
			padding: 5rpx 15rpx;
			border-radius: 30rpx;
			font-size: 22rpx;
			margin-right: 20rpx;
		}
	}
	
	.searchv {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		background-color: white;
	
		.btn-grad {
			padding-inline: 20rpx;
			line-height: 60rpx;
			border-radius: 30rpx;
			background-image: linear-gradient(to right, #36D1DC 0%, #5B86E5 51%, #36D1DC 100%);
			margin: 10px;
			text-align: center;
			text-transform: uppercase;
			transition: 0.5s;
			background-size: 200% auto;
			color: white;
			box-shadow: 0 0 20px #eee;
			border-radius: 10px;
			display: block;
		}
	
		.btn-grad:hover {
			background-position: right center;
			/* change the direction of the change here */
			color: #fff;
			text-decoration: none;
		}
	
	}
</style>